<template>
	<view>
		<view class="container">
			<!-- 产权人 -->
			<view class="property-right-person">
				<view class=" customer-info-title flex-align">
					<view class="line"></view>
					<view class="info-title-text">产权人</view>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">姓名</text>
					<text class="info-item-val">{{tbSurveyData.ownerName}}</text>
				</view>
			</view>
			<!-- 房屋信息 -->
			<view class="hous-info property-right-person">
				<view class=" customer-info-title flex-align">
					<view class="line"></view>
					<view class="info-title-text">房屋信息</view>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">小区名</text>
					<text class="info-item-val">{{tbSurveyData.estateName}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">房屋新旧</text>
					<text class="info-item-val">{{tbSurveyData.oldNew}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">建筑梯户数</text>
					<text class="info-item-val">{{tbSurveyData.houseHolds}}</text>
				</view>
				<view class="info-item-box">
					<text class="info-item-text">房屋楼层</text>
					<view class="info-item-val multiple-lines">{{tbSurveyData.houseFloor}}</view>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">物业费</text>
					<text class="info-item-val">{{tbSurveyData.propertyFee}}（元/平方米）</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">房屋建筑面积</text>
					<text class="info-item-val">{{tbSurveyData.area}}（平方米）</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">房屋架构</text>
					<text class="info-item-val">{{tbSurveyData.structure}}（平方米）</text>
				</view>
				<view class="info-item-box">
					<text class="info-item-text">房屋户型</text>
					<view class="info-item-val multiple-lines">{{tbSurveyData.model}}</view>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">建成年限</text>
					<text class="info-item-val">{{tbSurveyData.age}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">房屋当前状态</text>
					<text class="info-item-val">{{tbSurveyData.state}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">贝壳网咨询</text>
					<text class="info-item-val">{{tbSurveyData.conch}}</text>
				</view>
				<view class="info-item flex-space">
					<text class="info-item-text">客户有无车库</text>
					<text class="info-item-val">{{tbSurveyData.carport}}</text>
				</view>
				<view class="info-item-box">
					<text class="info-item-text">特别说明</text>
					<view class="info-item-val multiple-lines">{{tbSurveyData.especially}}</view>
				</view>
				<view class="info-item-box">
					<text class="info-item-text">房屋配套</text>
					<view class="info-item-val multiple-lines">{{tbSurveyData.ancillary}}</view>
				</view>
			</view>
			<!-- 借款信息 -->
			<view class="borrowing-info">
				<view class=" customer-info-title flex-align">
					<view class="line"></view>
					<view class="info-title-text">借款信息</view>
				</view>
				<view class="info-item-box">
					<text class="info-item-text">借款用途</text>
					<view class="info-item-val multiple-lines">{{tbSurveyData.purpose}}</view>
				</view>
				<view class="info-item-box">
					<text class="info-item-text">客户还款来源</text>
					<view class="info-item-val multiple-lines">{{tbSurveyData.source}}</view>
				</view>
			</view>
		</view>
		<!-- 分割线 -->
		<view class="divider"></view>
		<view class="container">
			<!-- 附件信息 -->
			<view class="attachment">
				<view class=" customer-info-title flex-align">
					<view class="line"></view>
					<view class="info-title-text">附件信息</view>
				</view>
				<!-- 身份证 -->
				<view class="file-upload">
					<view class="file-upload-title">身份证照片</view>
					<view class="img-box flex-space">
						<view class="sfz-item" v-for="(item,index) in tbSurveyAccessoryList" v-if="item.type==0"
							:key="index">
							<image :src="item.url" class="sfz-img"></image>
						</view>
					</view>
				</view>
				<!-- 房产证照片 -->
				<view class="file-upload">
					<view class="file-upload-title">房产证照片</view>
					<view class="img-box">
						<view class="img-item" v-for="(item,index) in tbSurveyAccessoryList" v-if="item.type==1"
							:key="index">
							<image :src="item.url" class="img-item-img"></image>
						</view>
					</view>
				</view>
				<!-- 房屋外观照 -->
				<view class="file-upload">
					<view class="file-upload-title">房屋外观照</view>
					<view class="tips-text">小区名字1张、小区入口1张、小区环境2张、估价对象本栋楼1张、小区其它栋2张、大楼入口1张、大楼栋数1张、电梯楼</view>

					<view class="img-box">
						<view class="img-item" v-for="(item,index) in tbSurveyAccessoryList" v-if="item.type==4"
							:key="index">
							<image :src="item.url" class="img-item-img"></image>
						</view>
					</view>
				</view>
				<!-- 房屋照片 -->
				<view class="file-upload">
					<view class="file-upload-title">房屋照片</view>
					<view class="tips-text">门牌号（开起门照）1张、室内各个房间（房间照全，如房屋是跃层客厅那张需把楼梯和客厅一起照出来）1张、阳台望向室外1张</view>

					<view class="img-box">
						<view class="img-item" v-for="(item,index) in tbSurveyAccessoryList" v-if="item.type==5"
							:key="index">
							<image :src="item.url" class="img-item-img"></image>
						</view>
					</view>
				</view>
				<!-- 签约文件照片 -->
				<view class="file-upload">
					<view class="file-upload-title">签约文件照片</view>
					<view class="img-box">
						<view class="img-item" v-for="(item,index) in tbSurveyAccessoryList" v-if="item.type==3"
							:key="index">
							<image :src="item.url" class="img-item-img"></image>
						</view>
					</view>
				</view>
				<!-- 房屋视频 -->
				<view class="file-upload">
					<view class="file-upload-title">房屋视频</view>
					<video v-for="(item,index) in tbSurveyAccessoryList" :key="index" v-if="item.type==2"
						:src="item.url" class="add-video"></video>
				</view>
				<!-- 上传评估文件照片 -->
				<view class="file-upload">
					<view class="file-upload-title">评估文件照片</view>
					<view class="img-box">
						<view class="img-item" v-for="(item,index) in tbSurveyAccessoryList" v-if="item.type==6"
							:key="index">
							<image :src="item.url" class="img-item-img"></image>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				tbSurveyData: {},
				tbSurveyAccessoryList: [],
			}
		},
		onLoad: function(options) {

			this.id = options.id;

			if (this.id) {
				this.getDetail();
			}
		},
		methods: {
			//获取详情
			getDetail() {
				this.$api.surveyDetail(this.id).then(res => {
					let tbSurveyData = {};
					let data = res.data.data.tbSurveyData;
					for (const key in data) {
						if (!data[key]) {
							tbSurveyData[key] = ''
						} else {
							tbSurveyData[key] = data[key]
						}
					}

					this.tbSurveyData = tbSurveyData;
					this.tbSurveyAccessoryList = res.data.data.tbSurveyAccessoryList

				})
			},
		},

	}
</script>

<style scoped>
	page {
	  background-color: #fff;
	}
	
	.container {
	  padding: 40rpx 30rpx;
	}
	
	.property-right-person {
	  margin-bottom: 42rpx;
	}
	
	.customer-info-title {
	  margin-bottom: 20rpx;
	}
	
	.line {
	  width: 8rpx;
	  height: 28rpx;
	  background: #585CF7;
	  border-radius: 4rpx;
	  margin-right: 13rpx;
	}
	
	.info-title-text {
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333333;
	}
	
	.info-item {
	  height: 110rpx;
	  border-bottom: 1rpx solid #EEEEEE;
	}
	
	.info-item-text {
	  font-size: 30rpx;
	  color: #333333;
	}
	
	.info-item-val {
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #333333;
	}
	
	.multiple-lines {
	  padding: 20rpx 0;
	}
	
	.info-item-input {
	  text-align: right;
	  font-size: 30rpx;
	}
	
	.info-item-box {
	  padding: 40rpx 0 10rpx;
	  border-bottom: 1rpx solid #EEEEEE;
	}
	
	.info-item-textarea {
	  margin-top: 50rpx;
	}
	
	.dowload {
	  height: 98rpx;
	  background: #585CF7;
	  border-radius: 49rpx;
	  width: 100%;
	  margin-right: 6rpx;
	  font-size: 36rpx;
	  color: #FFFFFF;
	  margin-top: 60rpx;
	}
	
	.dowload-icon {
	  width: 46rpx;
	  height: 34rpx;
	
	}
	
	.divider {
	  width: 100%;
	  height: 20rpx;
	  background: #F8F8F8;
	}
	
	.file-upload-title {
	  font-size: 30rpx;
	  color: #333333;
	  margin-bottom: 40rpx;
	}
	
	
	.img-item {
	  position: relative;
	  margin-right: 30rpx;
	  width: calc((100% - 90rpx)/3);
	  height: 210rpx;
	  margin-bottom: 30rpx;
	  display: inline-block;
	}
	
	.img-item:nth-child(3n) {
	  margin-right: 0;
	}
	
	.img-item-img {
	  width: 100%;
	  height: 210rpx;
	  border-radius: 10px;
	  margin-bottom: 30rpx;
	}
	
	.add-video {
	  width: 100%;
	  height: 300rpx;
	  margin-bottom: 30rpx;
	  border-radius: 10rpx;
	}
	
	
	
	.img-close {
	  width: 40rpx;
	  height: 40rpx;
	  position: absolute;
	  top: -5px;
	  right: -8px;
	}
	
	.sfz-item {
	  width: 324rpx;
	  height: 220rpx;
	  overflow: hidden;
	  border-radius: 10rpx;
	  margin-bottom: 50rpx;
	}
	
	.sfz-img {
	  width: 100%;
	  height: 220rpx;
	}
	
	.tips-text {
	  font-size: 22rpx;
	  color: #999999;
	  line-height: 30rpx;
	  margin-bottom: 40rpx;
	}
</style>
